import { Button, message } from "antd";
import styles from "./Dev.module.css";
import React, { useState } from "react";
import { apiRoute } from "../../utils/api";
import { Component } from "../../domain/Component";
import { Result } from "../../domain/Result";
export const Dev = () => {
  // interface FormType {
  //   nickname: string;
  //   path: string;
  //   thumbnail: string;
  // }
  const [form, setForm] = useState<Component>({
    id: -1,
    name: "",
    path: "",
    label: "",
    description: "",
    thumbnail: "",
    // create_at: "",
  });

  const change = (e: React.ChangeEvent<HTMLInputElement>) => {
    setForm({
      ...form,
      [e.target.name]: e.target.value,
    });
  };

  const upload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files && e.target.files[0];
    const fd = new FormData();
    fd.append("file", file as File);
    fetch(apiRoute("upload"), {
      method: "POST",
      body: fd,
    })
      .then((data) => data.json() as Promise<Result<string>>)
      .then((data) => {
        console.log(data.data);
        setForm((e) => ({ ...e, thumbnail: data.data }));
      });
  };

  return (
    <div className={styles.box}>
      <form action="#">
        <label>
          <span>name</span>
          <input type="text" name="name" id="name" onChange={change} />
        </label>

        <label>
          <span>label</span>
          <input type="text" name="label" id="label" onChange={change} />
        </label>

        <label>
          <span>path</span>
          <input type="text" name="path" id="path" onChange={change} />
        </label>

        <label>
          <span>thumbnail</span>
          <input
            type="file"
            name="thumbnail"
            id="thumbnail"
            onChange={upload}
          />
        </label>

        <label>
          <textarea
            name="description"
            placeholder="description"
            onChange={(el) =>
              setForm((e) => ({ ...e, description: el.target.value }))
            }
          ></textarea>
        </label>
        <div className={styles.gap}></div>
        <Button
          type="primary"
          onClick={() => {
            if (form.name === "") {
              console.log(form);
              message.error("please enter your component name!");
              return;
            }
            if (form.label === "") {
              console.log(form);
              message.error("please enter your component label!");
              return;
            }
            if (form.path === "") {
              message.error("please enter your component path!");
              return;
            }
            fetch(apiRoute("uploadComponent"), {
              method: "POST",
              body: JSON.stringify(form),
              headers: {
                "Content-Type": "application/json",
              },
            }).then((res) => {
              res.json().then((data) => {
                console.log(data);
                if (data.success) {
                  message.success("success");
                }
              });
            });
            // for (let key in form) {
            //   if (form[key as keyof FormType] === "") {
            //     alert("please fill out " + key);
            //     return;
            //   }
            // }
          }}
        >
          submit
        </Button>
      </form>
    </div>
  );
};
